import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Rectangle {
    id: mapView
    color: "white"
    radius: 10
    border.color: "#e0e0e0"
    border.width: 1
    
    // 高亮显示的基站ID
    property string highlightedStationId: ""
    
    // 高亮显示指定基站的方法
    function highlightStation(stationId) {
        highlightedStationId = stationId
        // 3秒后取消高亮
        highlightTimer.restart()
    }
    
    Timer {
        id: highlightTimer
        interval: 3000
        onTriggered: highlightedStationId = ""
    }
    
    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 15
        spacing: 10
        
        // 标题栏
        RowLayout {
            Layout.fillWidth: true
            
            Text {
                text: "基站分布地图"
                font.pixelSize: 18
                font.bold: true
                color: "#2c3e50"
            }
            
            Item { Layout.fillWidth: true }
            
            // 图例
            RowLayout {
                spacing: 15
                
                Repeater {
                    model: [
                        {color: "#27ae60", label: "正常"},
                        {color: "#f39c12", label: "警告"},
                        {color: "#e74c3c", label: "严重"},
                        {color: "#95a5a6", label: "离线"}
                    ]
                    
                    RowLayout {
                        spacing: 5
                        
                        Rectangle {
                            width: 12
                            height: 12
                            radius: 6
                            color: modelData.color
                        }
                        
                        Text {
                            text: modelData.label
                            font.pixelSize: 12
                            color: "#7f8c8d"
                        }
                    }
                }
            }
        }
        
        // 地图区域
        Rectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: "#ecf0f1"
            radius: 8
            clip: true
            
            // 背景网格
            Canvas {
                anchors.fill: parent
                onPaint: {
                    var ctx = getContext("2d")
                    ctx.strokeStyle = "#d0d0d0"
                    ctx.lineWidth = 1
                    
                    // 绘制网格
                    for (var x = 0; x < width; x += 50) {
                        ctx.beginPath()
                        ctx.moveTo(x, 0)
                        ctx.lineTo(x, height)
                        ctx.stroke()
                    }
                    for (var y = 0; y < height; y += 50) {
                        ctx.beginPath()
                        ctx.moveTo(0, y)
                        ctx.lineTo(width, y)
                        ctx.stroke()
                    }
                }
            }
            
            // 基站标记
            Repeater {
                model: baseStationModel
                
                BaseStationMarker {
                    // 将经纬度映射到地图坐标
                    x: ((model.longitude - 116.30) / 0.2) * parent.width - width / 2
                    y: ((40.00 - model.latitude) / 0.1) * parent.height - height / 2
                    
                    stationId: model.stationId
                    stationName: model.stationName
                    status: model.status
                    signalStrength: model.signalStrength
                    connectedUsers: model.connectedUsers
                    highlighted: mapView.highlightedStationId === model.stationId
                }
            }
            
            // 热力图覆盖层
            Canvas {
                id: heatmapCanvas
                anchors.fill: parent
                opacity: 0.3
                
                Timer {
                    interval: 3000
                    running: true
                    repeat: true
                    onTriggered: heatmapCanvas.requestPaint()
                }
                
                onPaint: {
                    var ctx = getContext("2d")
                    ctx.clearRect(0, 0, width, height)
                    
                    // 绘制热力效果
                    for (var i = 0; i < baseStationModel.rowCount(); i++) {
                        var info = baseStationModel.getStationInfo(i)
                        if (info.status === "offline") continue
                        
                        var x = ((info.longitude - 116.30) / 0.2) * width
                        var y = ((40.00 - info.latitude) / 0.1) * height
                        var radius = info.signalStrength * 1.5
                        
                        var gradient = ctx.createRadialGradient(x, y, 0, x, y, radius)
                        
                        if (info.status === "normal") {
                            gradient.addColorStop(0, "rgba(46, 204, 113, 0.6)")
                            gradient.addColorStop(1, "rgba(46, 204, 113, 0)")
                        } else if (info.status === "warning") {
                            gradient.addColorStop(0, "rgba(241, 196, 15, 0.6)")
                            gradient.addColorStop(1, "rgba(241, 196, 15, 0)")
                        } else {
                            gradient.addColorStop(0, "rgba(231, 76, 60, 0.6)")
                            gradient.addColorStop(1, "rgba(231, 76, 60, 0)")
                        }
                        
                        ctx.fillStyle = gradient
                        ctx.fillRect(x - radius, y - radius, radius * 2, radius * 2)
                    }
                }
            }
            
            // 缩放和拖拽区域
            MouseArea {
                anchors.fill: parent
                property point lastPos
                
                onWheel: (wheel) => {
                    // 缩放功能（可选实现）
                }
                
                onPressed: (mouse) => {
                    lastPos = Qt.point(mouse.x, mouse.y)
                }
                
                onPositionChanged: (mouse) => {
                    if (pressed) {
                        // 拖拽功能（可选实现）
                    }
                }
            }
        }
    }
}

